/**
 * @description  barra工作台（个股收益贡献分析）
 * @author swl
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Spin } from 'antd';
import { XYAxisChartsC, TableC, ThreeHeaderC, SecondHeaderC } from '../../../../../../comps';

class StocksAnalysis extends PureComponent {
  // 默认值
  static defaultProps = {};

  constructor() {
    super();
    this.state = {
      selectName: undefined, // 选择的资产
      columns: [
        {
          title: '资产代码',
          key: 'tradingCode',
        },
        {
          title: '资产名称',
          key: 'tradingName',
          render: (text, record) => {
            if (text) {
              return <a onClick={() => this.selectRow(record)}>{text}</a>;
            } else {
              return '--';
            }
          },
        },
        {
          title: '平均权重期间',
          key: 'avg_weight',
        },
        {
          title: '基准平均权重期间',
          key: 'bench_weight',
        },
        {
          title: '超额权重期间',
          key: 'more_weight',
        },
        {
          title: '资产收益率',
          key: 'dealRate',
        },
        {
          title: '总收益贡献',
          key: 'all_contribution',
        },
        {
          title: '超额收益贡献',
          key: 'more_contribution',
        },
      ], // 个股收益贡献
      dataSource: [], // 个股收益贡献
      columnsFactor: [
        {
          title: '因子',
          key: 'tradingCode',
        },
        {
          title: '因子贡献',
          key: 'contribution',
        },
        {
          title: '因子平均暴露度',
          key: 'avg_expouse',
        },
        {
          title: '因子收益率',
          key: 'bench_weight',
        },
      ], // 因子
      dataFactor: [], // 因子
      xAxis: [],
      series: [],
    };
  }
  componentDidMount() {
    this.getInfo(this.props.searchData);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.searchData) !== JSON.stringify(this.props.searchData)) {
      this.getInfo(nextProps.searchData);
    }
  }

  // 获取因子变革数据
  getInfo = (searchData) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'incomeAnalysisM/stockContribution',
      payload: searchData,
      callback: (res) => {
        this.setState({
          dataSource: res.dataSource,
        });
        if (res.dataSource && res.dataSource.length) {
          this.selectRow(res.dataSource[0]);
        }
      },
    });
  };

  // 因子点击事件
  selectRow = (record) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'incomeAnalysisM/stockContributionInfo',
      payload: { code: record.tradingCode },
      callback: (res) => {
        this.setState({
          dataFactor: res.dataSource,
        });
      },
    });
    dispatch({
      type: 'incomeAnalysisM/stockContributionData',
      payload: { code: record.tradingCode },
      callback: (res) => {
        res.series.map((item) => {
          if (item.name.indexOf('资产超额权重') != -1) {
            item.type = 'bar';
          } else {
            item.type = 'line';
          }
        });
        this.setState({
          xAxis: res.xAxis,
          series: res.series,
        });
      },
    });
    this.setState({
      selectName: record.tradingName,
    });
  };

  showTable = () => {
    const { columns, dataSource } = this.state;
    const { loading } = this.props;
    let columnsNews = this.changeColumns(columns);
    return (
      <div style={{ marginBottom: '20px' }}>
        <TableC columns={columnsNews} dataSource={dataSource} rowKey='id' hidePage={true} scroll={{ y: 200 }} loading={loading.effects['incomeAnalysisM/stockContribution']} />
      </div>
    );
  };

  showFactorTable = () => {
    const { columnsFactor, dataFactor } = this.state;
    const { loading } = this.props;
    let columnsNews = this.changeColumns(columnsFactor);
    return (
      <TableC columns={columnsNews} dataSource={dataFactor} rowKey='id' hidePage={true} scroll={{ y: 200 }} loading={loading.effects['incomeAnalysisM/stockContributionInfo']} />
    );
  };

  // 改变columns的样式
  changeColumns = (columns) => {
    let data = columns;
    if (data && data.length) {
      data.map((item) => {
        if (item.key == 'avg_expouse') {
          item.type = 'money';
        }
        if (item.key == 'return_contribution') {
          item.type = 'rate';
        }
      });
    }
    return data;
  };

  // 收益折柱图
  showCharts = () => {
    const { xAxis, series } = this.state;
    const { loading } = this.props;
    return (
      <Spin spinning={loading.effects['incomeAnalysisM/stockContributionData']}>
        <XYAxisChartsC xAxis={xAxis} series={series} height={'240px'} yAxisUnit={['单位(%)']} width='100%' />
      </Spin>
    );
  };

  render() {
    const { selectName } = this.state;
    return (
      <div>
        <SecondHeaderC title='个股收益贡献分析' />
        页面暂未开放，敬请期待！
        {/* {this.showTable()}
        <Row>
          <Col span={12}>
            <div style={{ marginRight: '10px' }}>
              <ThreeHeaderC title={selectName} />
              {this.showFactorTable()}
            </div>
          </Col>
          <Col span={12}>
            <div style={{ margin: '37px 0 0 10px' }}>
              {this.showCharts()}
            </div>
          </Col>
        </Row> */}
      </div>
    );
  }
}
export default connect(({ incomeAnalysisM, loading }) => ({
  incomeAnalysisM,
  loading,
}))(StocksAnalysis);
